<template>
  <ElCard class="card art-custom-card" shadow="never">
    <template #header>
      <div class="card-header">
        <span class="title">磁盘</span>
        <span class="subtitle">分区概览</span>
      </div>
    </template>

    <ElTable :data="list" border stripe class="disk-table">
      <ElTableColumn prop="dir_name" label="盘符" min-width="90" />
      <ElTableColumn prop="type_name" label="类型" min-width="90" />
      <ElTableColumn prop="sys_type_name" label="文件系统" min-width="120" />
      <ElTableColumn prop="total" label="总大小" align="right" min-width="120" />
      <ElTableColumn prop="used" label="已用" align="right" min-width="120" />
      <ElTableColumn prop="free" label="剩余" align="right" min-width="120" />
      <ElTableColumn label="使用率" align="right" min-width="160">
        <template #default="{ row }">
          <div class="usage-cell">
            <ElProgress :percentage="parsePercent(row.usage)" :stroke-width="10" :show-text="false" />
            <span class="percent">{{ row.usage }}</span>
          </div>
        </template>
      </ElTableColumn>
    </ElTable>
  </ElCard>
</template>

<script setup lang="ts">
import type { ServerMonitorModel } from '@/api/system/server'

const props = defineProps<{ list: NonNullable<ServerMonitorModel['sys_files']> }>()

const parsePercent = (val?: string | number | null) => {
  const n = Number(String(val ?? '0').replace('%', ''))
  return Number.isFinite(n) ? Math.max(0, Math.min(100, n)) : 0
}
</script>

<style scoped>
.card-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.card-header .title {
  font-weight: 600;
}

.card-header .subtitle {
  color: var(--el-text-color-secondary);
  font-size: 12px;
}

.disk-table {
  margin-top: 12px;
}

.usage-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  width: 100%;
}

.percent {
  color: var(--el-text-color-secondary);
  min-width: 48px;
  text-align: right;
}
</style>